<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后台管理系统</title>
    <link rel="stylesheet" href="css/reset.css">
    <style>
        html,
        body {
            height: 100%;
        }

        .top {
            height: 8%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            color: white;
            padding: 0 20px;
            background-color: #0099cc;
        }

        .title {
            font-weight: 700;
            margin-right: 50px;
        }

        .top-right span:nth-child(1) {
            margin-right: 20px;
        }

        .bottom {
            height: 92%;
            display: flex;
        }

        aside {
            width: 200px;
            height: 100%;
            color: white;
            padding: 0 20px;
            background-color: #2c3e50;
        }

        aside p {
            height: 50px;
            line-height: 50px;
        }

        .jiantou {
            margin-left: 50px;
        }

        main {
            flex: 1;
            height: 100%;
            background-color: #f5f6fa;
        }

        nav {
            height: 40px;
            display: flex;
            justify-content: space-between;
            text-align: center;
            line-height: 40px;
            background-color: #fff;
        }

        .nav-left {
            display: flex;
        }

        .nav-right {
            display: flex;
        }

        .prev,
        .next {
            width: 40px;
            height: 40px;
            border: 1px solid gainsboro;
        }

        .home {
            width: 100px;
            color: white;
            background-color: #2c3e50;
        }

        .page {
            width: 100px;
        }

        section {
            padding: 0 20px;

        }

        .top-show {
            display: flex;
            justify-content: space-between;
        }

        .income {
            width: 24%;
            height: 60px;
            color: #fff;
            display: flex;
            justify-content: space-between;
            padding: 5px 15px;
        }

        .income1,
        .income2 {
            background-color: #0099cc;
        }

        .income3 {
            background-color: #15c377;
        }

        .income4 {
            background-color: #909080;
        }

        .incom-left p:nth-child(1) {
            font-size: 12px;
            margin-bottom: 6px;
        }

        .incom-right {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            text-align: center;
            line-height: 40px;
            background-color: #2dabd5;
        }

        .income3 .incom-right {
            background-color: #3ece8f;
        }

        .income4 .incom-right {
            background-color: #a4a496;
        }

        .middle-show {
            display: flex;
            justify-content: space-between;
            padding: 15px 0;
        }

        .echarts-1,
        .echarts-2 {
            width: 49.25%;
            height: 330px;
            padding: 10px;
            background-color: #fff;
        }

        .bottom-show {
            width: 100%;
            /* height: auto; */
            padding: 10px 15px;
            background-color: #fff;
        }

        table {
            width: 100%;
            text-align: center;
            border-spacing: 0;
            font-size: 14px;
        }

        table tr {
            height: 34px;
        }

        table thead th {
            border-bottom: 1px solid #eceeef;
        }

        table tbody td {
            border-top: 1px solid #eceeef;
        }
    </style>

</head>

<body>
    <div class="top">
        <div class="top-left">
            <span class="title">后台管理系统</span>
            <span class="iconfont ">#</span>
        </div>
        <div class="top-right">
            <span>当前用户：bootstrap中文</span>
            <span>角色：管理员</span>
        </div>
    </div>
    <div class="bottom">
        <aside>
            <p class="iconfont ">&emsp;后台首页<span class="iconfont jiantou">#</span></p>
            <p class="iconfont ">&emsp;设计元素<span class="iconfont jiantou">#</span></p>
            <p class="iconfont ">&emsp;表单元素<span class="iconfont jiantou">#</span></p>
            <p class="iconfont ">&emsp;示例页面<span class="iconfont jiantou">#</span></p>
            <p class="iconfont ">&emsp;常用列表<span class="iconfont jiantou">#</span></p>
            <p class="iconfont ">&emsp;脚本插件<span class="iconfont jiantou">#</span></p>
            <p class="iconfont ">&emsp;统计图表<span class="iconfont jiantou">#</span></p>
        </aside>
        <main>
            <nav>
                <div class="nav-left">
                    <div class="iconfont prev">#</div>
                    <div class="home">欢迎首页</div>
                </div>
                <div class="nav-right">
                    <div class="iconfont next">#</div>
                    <div class="page">
                        <span>页签操作</span>
                        <spa class="iconfont ">#</span>
                    </div>
                </div>
            </nav>
            <section>
                <div class="top-show">
                    <div class="income income1">
                        <div class="incom-left">
                            <p>今日收入</p>
                            <p>100,000.00</p>
                        </div>
                        <div class="iconfont incom-right">#</div>
                    </div>
                    <div class="income income2">
                        <div class="incom-left">
                            <p>昨日收入</p>
                            <p>200,000.00</p>
                        </div>
                        <div class="iconfont incom-right">#</div>
                    </div>
                    <div class="income income3">
                        <div class="incom-left">
                            <p>月度累计收入</p>
                            <p>1000,000.00</p>
                        </div>
                        <div class="iconfont incom-right">#</div>
                    </div>
                    <div class="income income4">
                        <div class="incom-left">
                            <p>年度累计收入</p>
                            <p>5000,000.00</p>
                        </div>
                        <div class="iconfont incom-right">#</div>
                    </div>
                </div>
                <div class="middle-show">
                    <div class="echarts-1"></div>
                    <div class="echarts-2"></div>
                </div>
                <div class="bottom-show">
                    <table>
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>订单号</th>
                                <th>商品名称</th>
                                <th>下单日期</th>
                                <th>状态</th>
                                <th>处理情况</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- <tr>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td>
                                    <span>完成</span>
                                </td>
                                <td>
                                    <span>100</span>
                                </td>
                            </tr> -->
                        </tbody>
                    </table>
                </div>
            </section>
        </main>
    </div>
</body>

</html>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.0/echarts.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.0/mock.js"></script>
<script src="js/echarts渲染.js"></script>
<script src="js/Promise封装ajax.js"></script>
<script src="js/render.js"></script>
<script src="js/getCookie.js"></script>
<script>
    render()
    getCookie()
</script>